<template>
	<view>
		<view class="money-box"
			style="background-size:cover;background-image: url('');">
			<view class="hm-p-t-50">
				<view class="avatar">
					<image :src="userInfo.avatar.url"></image>
				</view>
				<view class="nickname">{{userInfo.phone}}</view>
				<view @click="goTo('user/sign/logs')" class="hm-font-24 hm-col-tips">
					签到记录
					<view class="hm-dis-block-inline">
						<u-icon name="arrow-right" size="14" color="#909193"></u-icon>
					</view>
				</view>
			</view>
			<view class="hm-m-t-50 hm-col-main hm-font-26">
				签到{{setting.mode == 'fixed'?'赠送':'随机赠送最多'}}{{setting.number}}{{setting.type == 'score'?'个积分':'元余额'}}
			</view>
		</view>
		<view class="sign-box">
			<view class="sign">
				<view v-if="setting.plan" class="plan hm-cf">
					<view class="hm-col-main hm-border-b hm-p-b-20">
						签到任务 <text class="hm-font-22 hm-col-tips hm-m-l-10">{{setting.plan_title}}</text>
					</view>
					<view class="hm-p-t-10">
						<view v-for="(item,index) in setting.plan" :key="index" :class="sign_in > index ? 'yes':'no'" class="item">
							{{item}}
						</view>
					</view>
				</view>
				<view class="hm-col-tips hm-p-t-50">
					当前账户{{setting.type == 'score'?'积分':'余额'}}
				</view>
				<view class="score">
					{{setting.type == 'score'?userInfo.score:userInfo.money}}
				</view>
				<view class="but">
					<u-button :disabled="isSign" @click="sign" type="success">{{isSign > 0 ?'已签到':'签到'}}</u-button>
				</view>
			</view>
			<view class="hm-p-tb-20">
				<view class="hm-col-main hm-font-b font-26">签到说明</view>
			</view>
			<view v-for="(item,index) in setting.describe" :key="index" class="title-list">
				{{item}}
			</view>
			<!-- 技术支持 -->
			<view class="hm">
				{{applet.copyright}} <text class="v">V{{applet.version}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet: {},
				userInfo:{},
				setting: [],//签到配置
				isSign:0,//今天是否签过到
				sign_in:0,//连续签到天数
			};
		},
		props: {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			let _this = this;
			_this.applet = uni.getStorageSync('applet');
			_this.getUserDetail();
			_this.getSign();
		},
		methods: {

			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data;
				});
			},
			/**
			 * 获取当前用户签到信息
			 */
			getSign() {
				let _this = this;
				App._get('market.sign/isSign', {}, result => {
					_this.setData(result.data);
					let describe = _this.setting.describe;
					_this.setting.describe = describe.split('\n');
				});
			},
			/**
			 * 获取当前用户签到信息
			 */
			sign() {
				let _this = this;
				_this.isSign = 1;
				App._get('market.sign/sign', {}, result => {
					App.showSuccess(result.msg, function() {
						_this.getUserDetail();
						_this.getSign();
						//uni.navigateBack(); //返回上一页
					});
				});
			},
			/**
			 * 转跳指定的页面
			 */
			goTo(url) {
				App.goTo(url); // 转跳指定的页面
			},
		}
	};
</script>
<style lang="scss" scoped>
	.money-box {
		padding: 30rpx 50rpx;
		height: 300rpx;
		.avatar {
			float: left;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 5rpx solid #fff;
			overflow: hidden;
			margin-right: 20rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.nickname{
			display: inline-block;
			font-weight: 900;
			color: #000;
			padding: 20rpx 0 10rpx 0;
			font-size: 30rpx;
		}
	}
	.sign-box{
		float: left;
		width: 650rpx;
		margin-top: -70rpx;
		padding: 0rpx 50rpx;
		.sign{
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			text-align: center;
			box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
			.plan{
				text-align: left;
				.no{
					color: #c0c4cc;
					background-color: #f3f4f6;
					border: 1rpx dotted #c0c4cc;
				}
				.yes{
					color: #19be6b;
					background-color: #dbf1e1;
					border: 1rpx dotted #19be6b;
				}
				.item{
					font-size: 24rpx;
					display: inline-block;
					width: 70rpx;
					line-height: 70rpx;
					border-radius: 50%;
					text-align: center;
					float: left;
					margin: 10rpx 10rpx 0rpx 0rpx;
				}
			}
		}
		.score{
			font-weight: 900;
			font-family: "黑体";
			color: #000000;
			font-size: 50rpx;
			padding: 20rpx 0;
		}
		.but{
			padding: 50rpx 25%;
		}
	}
	.title-list {
		padding-left: 10rpx;
		color: #999;
		font-size: 26rpx;
		line-height: 40rpx;
		vertical-align: middle;
	}
</style>
